<template>
  <div class="vacation">
    <vacation-header></vacation-header>
    <vacation-swiper :list="vacationswiperList"></vacation-swiper>
    <vacation-dest :vacationlist="vacationList" :palce="palce"></vacation-dest>
    <vacation-travel :imgs="imgs" :holidayimgs="holidayimgs"></vacation-travel>
    <router-link to="/vacation/shopping">
    <div class="circle">
      <div class="iconfont shop-icon">&#xe657;</div>
    </div>
    </router-link>
  </div>
</template>

<script>
import VacationHeader from "./components/Header";
import VacationSwiper from "./components/Swiper"
import VacationDest from "./components/Dest"
import VacationTravel from "./components/Travel"
import axios from "axios";
export default {
  name: "Vacation",
  components: {
    VacationHeader,
    VacationSwiper,
    VacationDest,
    VacationTravel
  },
  data() {
    return {
      vacationswiperList: [],
      vacationList: [],
      palce: [],
      imgs: [],
      holidayimgs: []
    };
  },
  methods: {
    getVacationInfo() {
      axios.get('/api/vacation.json').then(this.getVacationInfoSucc)
    },
    getVacationInfoSucc(res) {
      res = res.data
      if(res.ret && res.data) {
        const data = res.data
        this.vacationswiperList = data.vacationswiperList
        this.vacationList = data.vacationList
        this.palce = data.travelplace
        this.imgs = data.travelimages
        this.holidayimgs = data.holidayproject
      }
      console.log(this.palce)
    }
  },
  mounted() {
    this.getVacationInfo()
  }
};
</script>
<style lang="stylus" scoped>
body {
  background #f0f0f0
  height 100%
}

.circle {
  width 1rem
  height 1rem
  position fixed
  top 11rem
  right .4rem
  background #000
  opacity 0.6
  z-index 1000
  border-radius 1rem
}

.shop-icon {
  color #fff
  font-size .6rem
  text-align center
  line-height 1rem
}
</style>